<!-- 待考试卷-->
<template>
    <div class="app-container">

        <el-form :model="form" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="卷名" prop="roleName">
                <el-input v-model="form.content" placeholder="请输入卷名" clearable style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="考试时间">
                <el-col :span="12">
                    <el-date-picker v-model="form.startDate" align="right" type="date" placeholder="开始日期"
                        value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-col>
                <el-col :span="12">
                    <el-date-picker v-model="form.endDate" align="right" type="date" placeholder="结束日期"
                        value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="searchTable(form)">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="emptySearch(form)">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openDialog">新增</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="paperName" label="卷名" align="center"> </el-table-column>
            <el-table-column prop="qrCode" label="二维码" align="center">
                <template slot-scope="scope">
                    <el-popover placement="top-start" title="" trigger="hover">
                        <img :src="scope.row.qrCode" alt="" style="width: 150px;height: 150px">
                        <img slot="reference" :src="scope.row.qrCode" style="width: 80px;height: 80px">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="waitState" label="待考状态" align="center">
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.waitState == 0">未完成</el-tag>
                    <el-tag v-else>已完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="waitUserNum" label="待考人数" align="center"> </el-table-column>
            <el-table-column prop="alreadyUserNum" label="已考人数" align="center"> </el-table-column>
            <el-table-column prop="waitTime" label="截止日期" align="center"> </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="goExamination(scope.row)" type="text" size="small">去考试</el-button>
                    <el-button @click="pushPaper(scope.row)" type="text" size="small">结束考试</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col>
                <pagination v-show="seaechParams.total > 0" :total="total" :page.sync="seaechParams.current"
                    :limit.sync="seaechParams.size" @pagination="queryPaperAll" />
            </el-col>

        </el-row>


    </div>
</template>
    
    
<script>
import AddPaper from "@/views/onlineQuestion/addPaper.vue";
import AllocationQuetsion from "@/views/onlineQuestion/allocationQuestion.vue";
import { queryWaitPaperAll, queryPaperInfo } from '@/api/onlineQuestion/index'

export default {
    components: { AddPaper, AllocationQuetsion },
    name: "waitPaper",
    data() {
        return {
            showSearch: true,
            waitPaperName: "",
            paperId: 0,
            paperName: "",
            dialogTableVisible: false,
            tableData: [],
            total: 1,
            form: {
                content: "",
                startDate: "",
                endDate: "",
            },
            seaechParams: {
                current: 1,
                size: 10
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
        };
    },
    computed: {},
    created() {
        this.queryPaperAll();
    },
    mounted() { },
    methods: {
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.seaechParams.current = val;
            //刷新表格
            this.queryAll(this.form);
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.seaechParams.size = val;
            //刷新表格
            this.queryAll(this.form);
        },
        //获取试卷列表
        queryPaperAll() {
            queryWaitPaperAll(JSON.stringify(this.seaechParams)).then(res => {
                this.tableData = res.data.records;
            })
        },
        //搜索
        searchTable() {
            this.queryPaperAll();
        },
        //重置搜索框
        emptySearch(form) {
            form.content = "";
            form.startDate = "";
            form.endDate = "";
        },
        openDialog() {
            this.$refs.dialog.show();
        },
        //下发考试
        pushPaper(row) {
            this.waitPaperName = row.paperName
            //打开下发页面
            this.$refs.pushDialog.show();
        },
        //去考试
        goExamination(row) {
            //跳转到预考页面
            this.$router.push({ name: 'previewExam', params: { waitPaperId: row.waitPaperId } })
        },
        // 查看详情
        handleClick(row) {
            this.$router.push({ name: 'waitPaperDetail', params: { waitPaperId: row.waitPaperId } })
        }
    },


};
</script>>
    
<style>
.box {
    height: calc(100vh - 120px);
    font-size: 14px;
    line-height: 28px;
}

.title {
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 10px;
    padding-top: 20px;
    margin-bottom: 10px;
    border-bottom: #eee 1px dotted;
}

.tags span {
    margin-right: 10px;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: hwb(210 95% 5%);
}

.bg-purple {
    border: 0px solid cornflowerblue;
    height: 200px;
}

.app-container {
    height: 100%;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
}
</style>
    